<template>
    <div class="editProjectForm">
        <el-row type="flex" justify="left">
            <el-button style="margin-top:10px;" type="primary" @click="clickBack">返回</el-button>
            <el-button style="margin-top:10px;" type="primary" @click="submitOver">提交</el-button>
        </el-row>
        <el-row style="margin-top:10px;">
            <el-col :span="23">
                <el-table :data="tableData" stripe style="width: 100%" v-loading.body="loading">
                    <el-table-column prop="mob.userName" label="执行人" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="assignmentManage.client" label="客户名称 " align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="assignmentManage.instrumentVersion" label="仪器型号 " align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="assignmentManage.instrumentCode" label="仪器码 " align="center" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
            <el-col :span="23">
                <div class="isprojectDvi">
                    <el-form>
                        <el-form-item label="日均标本数" label-width="90px">
                            <el-input v-model="tableData[0].mob.specimenNum"></el-input>
                        </el-form-item>
                        <el-form-item label="开展项目数" label-width="90px">
                            <el-input v-model="tableData[0].mob.projectNum" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="长征项目" label-width="90px">
                            <el-checkbox-group v-model="isProjectIdTrue">
                                <i v-for="item in isProject" :key="item._id" style="margin-right : 10px">
                                    <el-checkbox :label="item._id" @change="checkBox()">{{item.detailName}}</el-checkbox>
                                </i>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: "editProjectForm",
    data() {
        return {
            tableData: [],
            loading: true,
            isProject: [],//长征项目集合
            isProjectIdTrue: [],//checkBox 长征项目判断Id集合
        };
    },
    methods: {
        clickBack: function() {
            this.$router.push({ path: "Form" });
        },
        initList: function() {
            let mobId = sessionStorage.getItem("mobId");
            this.$http.post('api/mobTask/getMobListByMobId', { mobId: mobId }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.loading = false;
                    console.log(result.data, 'result.data')
                    this.tableData[0] = result.data;
                    //长征项目
                    let projectTrue = [];
                    result.data.mob.isProject.forEach(function(element) {
                        projectTrue.push(element.projectId);
                    });
                    this.isProjectIdTrue = projectTrue;
                }
            });
        },
        queryAllProjectList: function() {//获取所有projectDetail集合
            this.$http.post('api/mobTask/getProjectDetailList').then(res => {
                let result = res.data;
                if (result.code == 100) {
                    let result_ = [];
                    this.isProject = result.data;
                }
            });
        },
        checkBox: function() {
            this.tableData[0].mob.projectNum = this.isProjectIdTrue.length + this.tableData[0].mob.notProject.length;
            this.loading = true;
            this.loading = false;
        },
        submitOver: function() {//最后提交
            let mobId = sessionStorage.getItem('mobId');
            let projectNum = this.tableData[0].mob.projectNum;
            let specimenNum = this.tableData[0].mob.specimenNum;
            let isProjectIdTrue = this.isProjectIdTrue;
            console.log(mobId, '----------------------')
            console.log(projectNum, '----------------------')
            console.log(specimenNum, '----------------------')
            console.log(isProjectIdTrue, 'isProjectIdTrue')
            this.$http.post('api/mobTask/editProjectCheckboxByMobId', {
                mobId: mobId, projectNum: projectNum,
                specimenNum: specimenNum, isProjectIdTrue: isProjectIdTrue
            }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.initList();
                    this.message('修改成功', 'success');
                    let router = this.$router;
                    setTimeout(function() {
                        router.push({ path: "Form" });
                    }, 1000);
                }
            });
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }
    },
    created: function() {
        this.initList();
        this.queryAllProjectList();
    }
}
</script>
<style lang="css" scoped>
.bg-purple-light {
    background: #EEF1F6;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.isprojectDvi {
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #ECEFF3;
    background-color: #F4F6F9;
}
</style>